<script lang="ts" setup>
const {index, title, expandInit} = defineProps<{
    index: number
    title: string
    expandInit?: boolean
    notAllowOperation?: boolean
}>()

// 修改父组件数据
const emit = defineEmits<{
    (e: 'add-episode', value: number): void
    (e: 'del-chapter', value: number): void
    (e: 'edit-chapter', index: number, value: string): void
}>()

// 向上向下图标控制变量
const isExpand = $ref(expandInit ?? false)

// 是否编辑控制变量
let isEditState = $ref(false)
// 章标题
let titleContent = $ref(title)

// 章标题编辑或保存
function handleEditOrSave() {
    if (!isEditState) {
        emit('edit-chapter', index, titleContent)
    }
    isEditState = !isEditState
}
</script>

<template>
    <div text-gray-7>
        <div border="~" p="x-4 y-2" flex items-center justify-between text-xl>
            <div flex="~ v-center" gap-4>
                <div cursor-pointer flex="~ v-center" @click="isExpand = !isExpand">
                    <up-outlined v-show="!isExpand"/>
                    <down-outlined v-show="isExpand"/>
                </div>
                <div flex="~ v-center" gap="0.8">
                    <span flex-shrink-0>第{{ index + 1 }}章</span>
                    <span v-show="!isEditState">{{ titleContent }}</span>
                    <a-input text="lg!" v-model:value="titleContent" v-show="isEditState"/>
                </div>
            </div>
            <div flex="~ v-center" gap-4 v-if="!notAllowOperation">
                <a-button :type="!isEditState ? 'dashed' : 'primary'" @click="handleEditOrSave">{{
                        isEditState ? '保存' : '编辑'
                    }}
                </a-button>
                <a-button v-show="!isEditState" type="primary" danger @click="$emit('del-chapter', index)">删除
                </a-button>
                <a-button v-show="!isEditState" type="primary"
                          @click="(isExpand = true) && $emit('add-episode', index)">新增集
                </a-button>
            </div>
        </div>

        <div w="95%" flex="~ col v-center" gap-2 ml-auto justify-end v-show="isExpand">
            <slot/>
        </div>

    </div>
</template>